<template>
  <div id="#app">
    <!-- 第一种情况不显示页面结构（登录、注册...） -->
    <RouterView v-show="!route.meta.requiresAuth" />

    <!-- 第二种显示页面结构（仪表盘、权限管理...） -->
    <el-container v-show="route.meta.requiresAuth" >
      <el-aside>
        <!-- 调用侧边菜单组件 -->
        <MenuAside />

      </el-aside>
      <el-container>
        <el-header>
          <!-- 调用头部组件 -->
          <HeaderCom />

        </el-header>
        <el-main>
          <!-- 页面路由视图占位 -->
          <RouterView />

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
//引入侧边菜单组件
import MenuAside from './components/MenuAside.vue'
import HeaderCom from './components/HeaderCom.vue';
// 引入路由配置方法
import { useRoute } from 'vue-router';

const route = useRoute()
</script>

<style lang="less" scoped>
.el-container{
  .el-aside{
    width: auto;
    min-height:100vh;
    background-color:#545c64;
  }
  .el-container{
    .el-header{
      border-bottom: 1px solid #f5f5f5;
    }
    .el-main{

    }
  }
}
</style>
